const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //压缩js
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); //分离css
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); //压缩css
const CleanWebpackPlugin = require('clean-webpack-plugin'); //打包前清空
const copyWebpackPlugin = require('copy-webpack-plugin'); //复制静态资源
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //性能分析
const webpackMerge = require('webpack-merge');
const webpackConfigBase = require('./webpack.base');


const webpackConfigProd = {
    mode: 'production',
    module: {
        rules: [
            //  scss编译
            // npm i sass-loader node-sass css-loader style-loader postcss-loader autoprefixer -D
            {
                test: /\.(sa|sc|c)ss$/,
                include: path.resolve(__dirname, '../src'),
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer')({
                                    browsers: ['last 30 versions', "> 2%", "Firefox >= 10", "ie 6-11"]
                                })
                            ]
                        }
                    }
                ],
            },
        ],
    },
    plugins: [
        //压缩js
        new UglifyJsPlugin({
            uglifyOptions: {
                compress: {
                    warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
                    drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
                    pure_funcs: ['console.log'], //移除console
                    collapse_vars: true, // 内嵌定义了但是只用到一次的变量
                    reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
                },
            },
            sourceMap: true,
            parallel: true,
        }),

        //打包前清空目录
        new CleanWebpackPlugin(['dist'], {
            root: path.resolve(__dirname, '../'), //根目录
            verbose: true, //开启在控制台输出信息
            dry: false //启用删除文件
        }),
        //分离css
        new MiniCssExtractPlugin({
            filename: '[name].[hash:8].css',
            chunkFilename: '[id].[hash:8].css',
        }),
        //压缩css
        new OptimizeCSSPlugin({
            cssProcessorOptions: {
                safe: true
            }
        }),
        //静态资源输出,将src目录下的assets文件夹复制到dist目录下
        /* new copyWebpackPlugin([{
             from: path.resolve(__dirname, "../src/assets"),
             to: './assets',
             ignore: ['.*']
         }]),*/
        //npm run build 后会打开一个页面，性能分析
        //new BundleAnalyzerPlugin()

    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "initial", //表示显示块的范围，有三个可选值：initial(初始块)、async(按需加载块)、all(全部块)，默认为all;
                    name: "vendor", //拆分出来块的名字(Chunk Names)，默认由块名和hash值自动生成；
                    enforce: true,
                },
                /* utils: { // 抽离自己写的公共代码，utils 这个名字可以随意起
                     chunks: 'initial',
                     name: 'utils',  // 任意命名
                     minSize: 0    // 只要超出 0 字节就生成一个新包
                 }*/
            }
        }
    },
};
module.exports = webpackMerge(webpackConfigBase, webpackConfigProd);